<template>
  <div class="register">
    <div class="registerH">
      <img @click="$router.go(-1)" src="../assets/leftl.png" />
    </div>
    <div class="registerInfo">
      <p>
        <span></span>
        <input v-model="phone" type="tel" placeholder="请输入手机号" />
      </p>

      <p class="flex">
        <span></span>
        <input v-model="registerCode.code" type="password" placeholder="请输入验证码" />
        <span v-if="isCode" @click="getCode" class="end">{{hint}}</span>
        <span v-else class="end">{{time}}s</span>
      </p>
      <p>
        <span></span>
        <input v-model="registerData.password" type="password" placeholder="输入密码" />
      </p>
      <p>
        <span></span>
        <input v-model="password" type="password" placeholder="确认密码" />
      </p>
      <!-- <p>
        <span>忘记密码?</span>
      </p>-->
      <p class="ajc">
        <span @click="register">立即确定</span>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isCode: true,
        hint: '获取验证码',
        phone: null,
        password: null,
        time: 60,
        registerData: {
          phone: null,
          password: null
        },
        timeInterval: null,
        registerCode: {
          phone: null,
          code: null
        }
      };
    },
    created() {
      this.$parent.showTabbar = false;
    },
    methods: {
      getCode() {
        this.$axios({
          url: 'common/messages?phone=' + this.phone,
          method: 'post'
        }).then(res => {
          console.log(res)
            if (res.data.code === 200) {
            this.isCode = false
            this.$toast('验证码发送成功')
            this.timeInterval = setInterval(() => {
              if (this.tiem > 0 ) this.time--
              else {
                this.time = 60
                this.isCode = true
              }
            }, 1000)
          } else {
            this.$toast(res.data.msg)
          }
        })
      },
      register() {
        if (this.password && this.password === this.registerData.password) {
          this.$axios({
            // url: 'user/register?phone=' + this.phone + '&password=' + this.registerData.password + '&code=' +this.registerCode.code,
            url:`address/update_password?type=5&code=${this.registerCode.code}&password=${this.registerData.password}&phone=${this.phone}`,
            method: 'post'
          }).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.$toast('修改成功')
              this.phone = null
              this.registerData.password = null
              this.registerCode.code = null
              this.password = null
            } else {
              this.$toast(res.data.msg)
            }
          })
        } else {
          this.$toast('两次密码输入不一致，请重新输入！')
        }
      }
    }
  };
</script>

<style lang='less'>
  .register {
    background: url("../assets/loginbg.png");
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    position: fixed;
  }
  .registerH {
    img {
      height: 1.4rem;
      padding: 10px 15px;
    }
  }
  .registerInfo {
    width: 75%;
    margin: 0 auto;
    margin-top: 14.5rem;
    p:nth-child(1),
    p:nth-child(3),
    p:nth-child(4) {
      border-radius: 21px;
      opacity: 0.8;
      background-color: #ffffff;
      margin-bottom: 20px;
      padding: 12px 10px;
      span {
        font-size: 15px;
        color: #fe4a70;
      }
    }
    input {
      border: 0;
      outline: 0;
      padding-left: 5px;
      width: 60%;
    }
    p:nth-child(2) {
      align-items: center;
      border-radius: 21px;
      opacity: 0.8;
      background-color: #ffffff;
      margin-bottom: 20px;
      padding: 6px 10px 6px 3px;
      justify-content: space-between;
      input {
        padding-left: 0;
      }
      span {
        font-size: 15px;
        color: #fe4a70;
      }
      span:last-child {
        background: linear-gradient(0deg, #ea1d0f 0%, #f54621 100%);
        border-radius: 5px;
        color: #fff;
        padding: 5px 5px;
      }
    }
    p:nth-child(5) {
      padding: 10px 0 35px 0;
      span {
        background: linear-gradient(90deg, #fea45f 0%, #fd8755 100%);
        box-shadow: 0px 2px 4px 0px rgba(40, 3, 3, 0.1);
        color: #fff;
        font-size: 15px;
        border-radius: 17px;
        padding: 10px 55px;
      }
    }
    p:nth-child(6) {
      width: 100%;
      img {
        width: 100%;
      }
    }
    p:last-child {
      padding-top: 10px;
      img {
        height: 2.8rem;
      }
    }
  }
</style>